import login from '@/assets/login.png'
import { Button, Input } from 'antd'
import { useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { useSnapshot } from 'valtio'
import { UserFz } from '../../stores/UserFz'

const App = () => {
    const userFz = useSnapshot(UserFz)

    const navigate = useNavigate()
    const forget = useCallback(() => {
        navigate('/login/forget')
    }, [navigate])
    const register = useCallback(() => {
        navigate('/login/register')
    }, [navigate])
    const on_login = useCallback(async () => {
        const islogin = await userFz.login()
        if (islogin) {
          alert('登录成功')
          navigate('/workbenth')
        }else{
          alert('账号已停用')
        }
    }, [])

    return (
        <div className="w-280 h-120 shadow-black shadow-2xl flex justify-between">
            <div className="w-full h-full flex">
                <div className="w-50%">
                    <img className="w-full h-full" src={login} alt="login" />
                </div>
                <div className="w-50% mt-10">
                    <div className="text-center *:m-2">
                        <div className="text-4xl font-bold">
                            智慧云SaaS餐饮服务平台
                        </div>
                        <div className="text-xl">
                            专 注 餐 饮 SAAS，做 科 技 餐 厅 系 统
                        </div>
                    </div>
                    <div className="p-5 *:m-5 *:w-full flex justify-center flex-wrap *:text-center ">
                        <div>
                            <Input
                                placeholder="请输入用户名称"
                                className="w-380px border-0 border-b-1 rounded-0"
                                value={userFz.username}
                                onChange={(e) =>
                                    userFz.xgsuername(e.target.value)
                                }
                            />
                        </div>
                        <div>
                            <Input
                                placeholder="请输入登录密码"
                                className="w-380px border-0 border-b-1 rounded-0"
                                value={userFz.password}
                                type="password"
                                onChange={(e) =>
                                    userFz.xgpassword(e.target.value)
                                }
                            />
                        </div>
                        <div className="mb-2 ">
                            <Button
                                onClick={on_login}
                                type="primary"
                                className={'w-380px h-10 rounded-2px'}
                            >
                                登录
                            </Button>
                        </div>
                        <div className="flex justify-center mt-0 text-xs">
                            <div className="w-380px flex justify-between">
                                <div
                                    onClick={forget}
                                    className="text-blue hover:text-blue-500 cursor-pointer"
                                >
                                    忘记密码
                                </div>
                                <div
                                    onClick={register}
                                    className="text-blue hover:text-blue-800 cursor-pointer"
                                >
                                    注册账号
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App
